<template>
	<!-- 商品详情轮播图 -->
	<view class='product-bg'>
		<swiper :indicator-dots="indicatorDots" indicator-active-color="var(--view-theme)" :autoplay="autoplay" :circular="circular"
		 :interval="interval" :duration="duration" @change="change" v-if="isPlay">
		 <!-- #ifndef APP-PLUS -->
			<swiper-item v-if="videoline">
				<view class="item">
					<view v-show="!controls" class="item-box">
						<video id="myVideo" :src='videoline' objectFit="cover" controls style="width:100%;height:100% "
						 show-center-play-btn show-mute-btn="true" auto-pause-if-navigate :custom-cache="false" :enable-progress-gesture="false" :poster="imgUrls[0]" @pause="videoPause"></video>
					</view>
					<view class="poster" v-show="controls">
						<image class="image" :src="imgUrls[0]"></image>
					</view>
					<view class="stop" v-show="controls" @tap="bindPause">
						<image class="image" src="../../static/images/stop.png"></image>
					</view>
				</view>
			</swiper-item>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<swiper-item v-if="videoline">
				<view class="item">
					<view class="poster" v-show="controls">
						<image class="image" :src="imgUrls[0]"></image>
					</view>
					<view class="stop" v-show="controls" @tap="bindPause">
						<image class="image" src="../../static/images/stop.png"></image>
					</view>
				</view>
			</swiper-item>
			<!-- #endif -->
			<block v-for="(item,index) in imgUrls" :key='index'>
				<swiper-item v-if="videoline?index>=1:index>=0">
					<image :src="item" class="slide-image" @click="getpreviewImage(index)" />
				</swiper-item>
			</block>
		</swiper>
		<!-- #ifdef APP-PLUS -->
		<view v-if="!isPlay" style="width: 100%; height: 750rpx;">
			<video id="myVideo" :src='videoline' objectFit="cover" controls style="width:100%;height:100% "
			 show-center-play-btn show-mute-btn="true" autoplay="true" auto-pause-if-navigate :custom-cache="false" :enable-progress-gesture="false" :poster="imgUrls[0]" @pause="videoPause"></video>
		</view>
		<!-- #endif -->
		<view class="pages">{{currents}} / {{imgUrls.length}}</view>
		
		<!-- 测试代码 swiper轮播图 -->
		<!-- <view class="swiper-content">
			<swiper
				:vertical="true"
				:circular="true"
				:disable-touch="true"
				:autoplay="true"
				:interval="3000"
				:duration="800"
				:display-multiple-items="2"
				class="swiper"
				@change="swiperChange"
			>
				<swiper-item 
					class="swiper-item" 
					@touchstart.stop="touchmove" 
					v-for="(item, index) in swiperList" 
					:key="index"
				>
					<view class="flex_c tip" :class="{ current: swiperCurrent === index, previous: swiperCurrent - 1 === index }">
						<image :src="item.avatar" class="avatar" mode=""></image>
						<text class="tips-text">{{ item.text }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			imgUrls: {
				type: Array,
				default: function() {
					return [];
				}
			},
			videoline: {
				type: String,
				value: ""
			}
		},
		data() {
			return {
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				currents: "1",
				controls: true,
				isPlay:true,
				videoContext:'',
				
				swiperCurrent: 0,
				swiperList: [
					{avatar: '/static/logo.png', text: 'name: 扎西德勒'},
					{avatar: '/static/logo.png', text: 'wx: TashiDelek668'},
					{avatar: '/static/logo.png', text: 'job: 小程序开发'},
					{avatar: '/static/logo.png', text: 'job: APP、H5开发'}
				]
			};
		},
		mounted() {
			if(this.videoline){
				this.imgUrls.shift()
			}
			// #ifndef APP-PLUS
			this.videoContext = uni.createVideoContext('myVideo', this);
			// #endif
		},
		methods: {
			getpreviewImage: function(index) {
				console.log(index)
				console.log(this.imgUrls)
				uni.previewImage({
					urls: this.imgUrls,
					current: this.imgUrls[index]
				});
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			/* 禁止用户操作滑动轮播图 */
			touchmove() {
				return false;
			},
			
			/* -- 上面是测试代码 -- */
			videoPause(e){
				// #ifdef APP-PLUS
				this.isPlay= true
				this.autoplay = true
				// #endif
			},
			bindPause: function() {
				
				// #ifndef APP-PLUS
				this.videoContext.play();
				this.$set(this, 'controls', false)
				this.autoplay = false
				// #endif
				// #ifdef APP-PLUS
				this.isPlay= false
				this.videoContext = uni.createVideoContext('myVideo', this);
				this.videoContext.play();
				// #endif
			},
			change: function(e) {
				this.$set(this, 'currents', e.detail.current + 1);
			}
		}
	}
</script>

<style scoped lang="scss"> 


  .item-box {
    width:100%;
    height:100% 
  }
	.product-bg {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

	.product-bg swiper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.product-bg .slide-image {
		width: 100%;
		height: 100%;
	}
	
	.product-bg .pages {
		position: absolute;
		background-color: #fff;
		height: 34rpx;
		padding: 0 10rpx;
		border-radius: 3rpx;
		right: 30rpx;
		bottom: 30rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #050505;
	}

	.product-bg .pages {
		position: absolute;
		background-color: rgba(0, 0, 0, .24);
		height: 56rpx;
		padding: 10rpx 24rpx;
		border-radius: 28rpx;
		right: 30rpx;
		bottom: 40rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	#myVideo {
		width: 100%;
		height: 100%
	}

	.product-bg .item {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.product-bg .item .poster {
		position: absolute;
		top: 0;
		left: 0;
		height: 750rpx;
		width: 100%;
		z-index: 9;
	}

	.product-bg .item .poster .image {
		width: 100%;
		height: 100%;
	}

	.product-bg .item .stop {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 136rpx;
		height: 136rpx;
		margin-top: -68rpx;
		margin-left: -68rpx;
		z-index: 9;
	}

	.product-bg .item .stop .image {
		width: 100%;
		height: 100%;
	}
	
	/* ---- */
	.swiper-content {
		position: absolute;
		left: 20rpx;
		bottom: 70rpx;
		width: 100%;
		height: 120rpx;
		.swiper {
			height: 110rpx;
			padding-left: 45rpx;
			opacity: 1;
			transition: opacity .8s ease;
			/* 用障眼法实现轮播图上一个item半透明 */
			.current { // 当前显示的 item
				opacity: .5;
				transition: opacity .8s ease;
			}
			.previous { // 上一个 item
				opacity: .2;
			}
			.flex_c {
				display: flex;
				align-items: center;
			}
			.tip {
				width: max-content;
				height: 50rpx;
				border-radius: 50rpx;
				padding: 5rpx 16rpx 5rpx 5rpx;
				background-color: rgba(0, 0, 0, 0.6);
				.avatar {
					width: 40rpx;
					height: 40rpx;
					background-color: #fff;
					border-radius: 100%;
					margin-right: 12rpx;
				}
				.tips-text {
					color: #f6fcff;
					font-size: 16rpx;
				}
			}
		}
	}
	/* 以上测试代码 */
</style>
